<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.skuPrefix" placeholder="货号" clearable style="width: 130px;" class="filter-item" />
      <el-button v-waves class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
    </div>

    <div v-if="description">
      <span>{{ description }}</span>
    </div>
    <br />

    <div v-if="list && list.length > 0">
      <el-table v-loading="listLoading" :data="list" :header-cell-style="headerCellStyle" border stripe element-loading-text="拼命加载中">
        <el-table-column prop="inventoryList" type="expand">
          <template slot-scope="{row}">
            <el-table :data="row.inventoryList" border stripe style="width: 100%">
              <el-table-column label="货源名称" prop="supplierChannelName" align="center" />
              <el-table-column label="货号" prop="sku" align="center" />
              <el-table-column label="转换尺码" prop="normalizedSize" align="center" />
              <el-table-column label="数量" prop="qty" align="center">
                <template slot-scope="inventoryScope">
                  <el-link type="primary" @click="handleBooking()">{{ inventoryScope.row.qty }}</el-link>
                </template>
              </el-table-column>
              <el-table-column label="吊牌价" prop="marketPrice" align="center" />
              <el-table-column label="折扣" prop="discount" align="center" />
              <el-table-column label="库存更新时间" prop="createTime" align="center" />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="货号" align="center" min-width="110px">
          <template slot-scope="{row}">
            <span style="float: left;">{{ row.sku }}</span>
          </template>
        </el-table-column>
        <el-table-column label="品牌" align="center" min-width="110px">
          <template slot-scope="{row}">
            <span style="float: left;">{{ row.brandName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="产品名称" align="center" min-width="110px">
          <template slot-scope="{row}">
            <span style="float: left;">{{ row.productName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="系列" align="center" min-width="110px">
          <template slot-scope="{row}">
            <span style="float: left;">{{ row.productSeries }}</span>
          </template>
        </el-table-column>
        <el-table-column label="大类" align="center" width="50px">
          <template slot-scope="{row}">
            <span>{{ row.goodsCategoryName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="年份" align="center" width="60px">
          <template slot-scope="{row}">
            <span>{{ row.year }}</span>
          </template>
        </el-table-column>
        <el-table-column label="季节" align="center" width="50px">
          <template slot-scope="{row}">
            <span>{{ row.season }}</span>
          </template>
        </el-table-column>
        <el-table-column label="性别" align="center" width="50px">
          <template slot-scope="{row}">
            <span>{{ row.goodsSexName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="颜色" align="center" min-width="110px">
          <template slot-scope="{row}">
            <span style="float: left;">{{ row.color }}</span>
          </template>
        </el-table-column>
        <el-table-column label="吊牌价" align="center" width="70px">
          <template slot-scope="{row}">
            <span style="float: right;">{{ row.marketPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="卖点" align="center" min-width="110px">
          <template slot-scope="{row}">
            <span style="float: left;">{{ row.saleProps }}</span>
          </template>
        </el-table-column>
        <el-table-column label="材质" align="center" min-width="110px">
          <template slot-scope="{row}">
            <span style="float: left;">{{ row.material }}</span>
          </template>
        </el-table-column>
        <el-table-column label="细节备注" align="center" min-width="110px">
          <template slot-scope="{row}">
            <span style="float: left;">{{ row.remark }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="在线下单" :visible.sync="bookingVisible">
      <el-form ref="bookingForm" :rules="bookingRules" :model="booking" label-width="100px" style="margin-left:0px;">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="booking.name" placeholder="请输入姓名" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="手机" prop="mobilephone">
          <el-input v-model="booking.mobilephone" placeholder="请输入手机" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="座机" prop="telephone">
          <el-input v-model="booking.telephone" placeholder="请输入座机" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="省份" prop="province">
          <el-input v-model="booking.province" placeholder="试试搜索:城市" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="邮编" prop="zipcode">
          <el-input v-model="booking.zipcode" placeholder="请输入邮编" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="自定义订单号" prop="orderId">
          <el-input v-model="booking.orderId" placeholder="请输入自定义订单号" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="booking.address" type="textarea" :rows="2" placeholder="请输入地址信息" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="booking.remark" type="textarea" :rows="2" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="bookingClear">清空</el-button>
        <el-button type="danger" @click="bookingVisible = false">继续选货</el-button>
        <el-button type="primary" @click="bookingConfirm">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { Message } from 'element-ui'
import { getProductInventory } from '@/api/manager/goods-api'
import waves from '@/directive/waves'

export default {
  name: 'ManagerProductInventory',
  directives: { waves },
  filters: {
  },
  data() {
    return {
      descriptionTemplate: '共找到了 {0} 件商品',
      listQuery: {
        skuPrefix: null
      },

      listLoading: false,
      description: null,
      list: null,

      bookingVisible: false,
      booking: {
        name: null,
        mobilephone: null,
        telephone: null,
        province: null,
        zipcode: null,
        orderId: null,
        address: null,
        remark: null
      },
      bookingRules: {
      }

    }
  },
  async created() {
    await this.initLoad()
  },
  methods: {
    async initLoad() {
      this.initListQuery()
    },
    getList() {
      if (this.listQuery && this.listQuery.skuPrefix && this.listQuery.skuPrefix.length >= 2) {
        this.listLoading = true
        getProductInventory(this.listQuery).then(response => {
          const { data } = response
          this.description = this.descriptionTemplate.format(data.count)
          this.list = data.list
          setTimeout(() => {
            this.listLoading = false
          }, 1 * 1000)
        }).catch(error => {
          Message({
            message: error,
            type: 'error',
            duration: 5 * 1000
          })
          this.listLoading = false
        })
      } else {
        Message({
          message: '为保证查询速度，请输入至少输入2位字符',
          type: 'error',
          duration: 5 * 1000
        })
      }
    },
    initListQuery() {
      this.listQuery = {
        skuPrefix: null
      }
    },

    handleFilter() {
      this.getList()
    },
    headerCellStyle({ row, rowIndex }) {
      return 'background-color: #42b983; color: #FFF;'
    },
    handleBooking() {
      this.booking = {
        name: null,
        mobilephone: null,
        telephone: null,
        province: null,
        zipcode: null,
        orderId: null,
        address: null,
        remark: null
      }
      this.bookingVisible = true
    },

    bookingClear() {
      this.booking = {
        name: null,
        mobilephone: null,
        telephone: null,
        province: null,
        zipcode: null,
        orderId: null,
        address: null,
        remark: null
      }
    },
    bookingConfirm() {
    }

  }
}

</script>
